.breadcrumb-centrer { /* 1. Placement dans la Grille */ justify-self: center; /* Centre l'élément horizontalement dans sa cellule de grille */ width: auto; /* L'élément ne prend que la largeur de son contenu */ max-width: 95%; /* Laisse une petite marge de sécurité pour ne pas coller l'écran */ /* 2. Flexbox Interne */ display: flex; flex-wrap: wrap; justify-content: center; /* Centre les liens si une deuxième ligne se crée */ align-items: center; /* 3. Marges et Espaces */ margin: 0 auto; /* Équilibre parfaitement les marges gauche/droite */ column-gap: 0.2rem; row-gap: 0.1rem; /* Espace minimal entre les lignes */ padding: 0.2rem 0; /* Padding haut/bas uniquement */ box-sizing: border-box; } .breadcrumb-link { display: inline-flex; align-items: center; line-height: 1.1; font-size: clamp(0.75rem, 3.5vw, 0.85rem); white-space: nowrap; padding: 0.1rem 0.2rem; } .breadcrumb-link:hover, .breadcrumb-link:active { background-color: rgba(0, 0, 0, 0.1); transform: translateY(-1px); } .breadcrumb-separator { color: #999; font-size: 0.85rem; user-select: none; margin: 0 0.1rem; /* Marge réduite */ } /* Adaptation pour les petits écrans */ @media (max-width: 600px) { .breadcrumb-link { padding: 0.15rem 0.3rem; font-size: 0.8rem; } .breadcrumb-separator { font-size: 0.8rem; margin: 0; } }